<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>体验动画</title>

        <style type="text/css">
            .container {
                width: 80vw;
                height: 20vh;
                border: 1px solid blue;
                margin: auto;
            }

            .circle {
                width: 20vw;
                height: 20vh;
                background: #dfdfdf;
                border-radius: 50%;
                animation: change 5s infinite;
            }

            @keyframes change {
                0% {
                    transform: scale(0.5, 0.5);
                    background: #ff0;
                    margin-left: 0;
                }
                50% {
                    transform: scale(1, 1);
                    background: purple;
                    margin-left: 30%;
                }
                100% {
                    transform: scale(0.75, 0.75);
                    background: gold;
                    margin-left: 50%;
                }
            }
        </style>
    </head>

    <body>

        <div class="container">
            <div class="circle"></div>
        </div>
        
    </body>
</html>